import React, { Component } from "react";
import styles from "./Home.module.scss";
import SearchInput from "../SearchInput/SearchInput";
import { getSwiperData, getNavImgs, getHomeFloorData } from "../../data/api";
import { withRouter } from "react-router-dom";
/* b.1 引入一个连接器 */
import { connect } from "react-redux";
/* a.1  引入走马灯组件*/
import { Carousel } from "antd-mobile";
class Home extends Component {
  // 点击首页图片 跳转详情页面
  handleImgClick = (params) => {
    // console.log(this.props);
    this.props.history.push("goodDetail?goods_id=" + params.goods_id);
  };
  // 点击图片导航 跳转到分类页面
  handleNavClick = (params) => {
    this.props.history.push("category");
  };
  // 点击图层数据 跳转到产品列表的页面
  handleFloorItemClick = (params) => {
    this.props.history.push("productList?query=服装");
  };

  state = {
    imgHeight: 176,
    swiper_list: [], //首页轮播图的数据
    navs: [], //首页导航图片
    floorData: [], // 首页的图片列表的数据
  };
  /* 2. 发请求 拿数据 */
  async componentDidMount() {
    getSwiperData().then((res) => {
      console.log(res);
      this.setState({
        swiper_list: res.message,
      });
    });
    let res = await getNavImgs();
    let floorData = await getHomeFloorData();
    // console.log(navs);
    this.setState({
      navs: res.message,
      floorData: floorData.message,
    });
  }
  render() {
    return (
      <div className={styles.jnHome}>
        {/* 首页标题的开始 */}
        <div className={styles.jnHomeHeader}>
          <div className={styles.homeHeaderTitle}>{this.props.title}</div>
        </div>
        {/* 首页标题的结束 */}
        {/* 首页搜索框开始 */}
        <SearchInput></SearchInput>
        {/* 首页搜索框结束 */}
        {/* 首页轮播图开始 */}
        <div className="jnHomeSwiper">
          <Carousel autoplay dots infinite>
            {this.state.swiper_list.map((val, index) => (
              <div
                onClick={this.handleImgClick.bind(this, val)}
                key={val.goods_id}
                style={{
                  display: "inline-block",
                  width: "100%",
                  height: this.state.imgHeight,
                }}
              >
                <img
                  src={val.image_src}
                  alt=""
                  style={{ width: "100%", verticalAlign: "top" }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event("resize"));
                    this.setState({ imgHeight: "auto" });
                  }}
                />
              </div>
            ))}
          </Carousel>
        </div>
        {/* 首页轮播图结束 */}
        {/* 首页图片导航开始 */}
        <div className={styles.jnHomeNavs}>
          {this.state.navs.map((v) => {
            return (
              <div
                onClick={this.handleNavClick}
                className={styles.homeNavsItem}
                key={v.image_src}
              >
                <img src={v.image_src} alt="" />
              </div>
            );
          })}
        </div>
        {/* 首页图片导航结束 */}
        {/* 首页楼层数据开始 */}
        <div className={styles.jnHomeFloorData}>
          {this.state.floorData.map((v) => {
            return (
              <div className={styles.floorDataItem} key={v.floor_title.name}>
                {/* title 开始 */}
                <div className={styles.dataItemImg}>
                  <img src={v.floor_title.image_src} alt={v.floor_title.name} />
                </div>
                {/* title 结束 */}
                {/* 图片列表开始 */}
                <div className={styles.productList}>
                  {v.product_list.map((p) => {
                    return (
                      <div
                        className={styles.productListItem}
                        key={p.image_src}
                        onClick={this.handleFloorItemClick.bind(this, p)}
                      >
                        <div className={styles.imageWrapper}>
                          <img src={p.image_src} alt={p.name} />
                        </div>
                      </div>
                    );
                  })}
                </div>
                {/* 图片列表结束 */}
              </div>
            );
          })}
        </div>
        {/* 首页楼层数据结束 */}
      </div>
    );
  }
}
/* b.2 配置注入的属性 */
const mapStateToProps = (state) => {
  return {
    title: state.homeReducer.title,
  };
};
/* b.3 注入属性 */
export default connect(mapStateToProps, null)(withRouter(Home));
